<template><!-- 主播信息组件 -->
  <div class="anchor">
    <div class="profile-photo" @click="goIns">
      <img :src="anchorImg" alt="">
    </div>
    <div class="name">{{anchorName}}</div>
    <div :class="['attention', {'active': isFollow}]" @click="attention">
      {{isFollow ? '已关注' : '关注'}}
    </div>
  </div>
</template>

<script>
  import fun from '@/util/function'
  export default {
    props: {
      isFollow: Boolean, // 是否关注
      videoInfo: Object,
    },
    data() {
      return {
        anchorImg: '',
        anchorName: '',
      }
    },
    created() {
      const { videoInfo: { userAnchor: { headImg, nickname }, partnerType } } = this.videoInfo;
      if (partnerType === 11) {
        const { videoInfo: { roomVideoExt2: { corpName, corpIcon } } } = this.videoInfo;
        this.anchorImg = corpIcon;
        this.anchorName = corpName;
      } else {
        this.anchorImg = headImg;
        this.anchorName =  nickname;
      }
    },
    mounted() {

    },
    methods: {
      attention() {
        if (this.isFollow) {
          this.$emit('formChildMsg', {
            type: 'cancelFollow',
          })
        } else {
          this.$emit('formChildMsg', {
            type: 'follow',
          })
        }
      },
      goIns() {
        this.$emit('formChildMsg', {
          type: 'goInstitution',
        });
        const { videoInfo: { roomVideoExt2: { corpCode }, partnerType } } = this.videoInfo;
        const param = {
          path: '/zxjt/institutionPage',
          query:{
            institutionId: corpCode,
            institutionSource: partnerType || 2,
            dzhPage: 'true'
          }
        };
        this.$router.push(param);
      }
    },
  }
</script>

<style scoped lang="less">
  .anchor {
    width: 480px;
    height: 100px;
    margin-left: 24px;
    background: #333;
    border-radius: 50px;
    padding: 10px;
    display: flex;
    align-items: center;

    .profile-photo {
      width: 84px;
      height: 84px;
      overflow: hidden;
      border-radius: 999px;

      img {
        width: 100%;
        height: 100%;
      }

    }

    .name {
      width: 224px;
      height: 45px;
      margin-left: 16px;
      font-size: 32px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      color: #FFFFFF;
      line-height: 45px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .attention {
      width: 100px;
      height: 42px;
      font-size: 24px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      color: #B67531;
      line-height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-left: 20px;
      background: url('../../../../../assets/images/pureVideo/attention.png') no-repeat;
      background-size: 100%;
    }

    .active {
      background: url('../../../../../assets/images/pureVideo/hasAttention.png') no-repeat;
      background-size: 100%;

    }

  }
</style>